<template>
<main class="d-flex justify-md-center fill-height">
<v-card class="fill-height my-3 w-75">
  <v-tabs
    v-model="tab"
    bg-color="primary"
  >
    <v-tab value="课程首页">课程首页 </v-tab>
    <v-tab value="课程资源">课程资源 </v-tab>
    <v-tab value="课程作业">课程作业 </v-tab>
    <v-tab value="课程讨论区">课程讨论区 </v-tab>
</v-tabs>

<v-card-text>
  <v-tabs-window v-model="tab">
    <v-tabs-window-item value="课程首页" class="fill-height">
      <CourseHome :id="props.id" />
    </v-tabs-window-item>
    <v-tabs-window-item value="课程资源" class="fill-height">
     bbb
    </v-tabs-window-item>
    <v-tabs-window-item value="课程作业" class="fill-height">
      cccc
    </v-tabs-window-item>
    <v-tabs-window-item value="课程讨论区" class="fill-height">
      dddd
    </v-tabs-window-item>
  </v-tabs-window>
</v-card-text>

</v-card>
</main>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CourseHome from '@/components/pageSpecific/CoursePageComonents/CourseHome.vue';
const props = defineProps({
  id:{
    type: Number,
    required: true
  }
})

const tab = ref(0)
</script>
